<template>
  <div class="pages-wrap">

    <div class="full-page">
      <div class="record">
        <mine-header>浏览记录</mine-header>
        <van-search placeholder="搜索" />
        <div class="content">
          <div class="li" v-for="(item, index) in list" :key="index" @click="toAction(item._id)">
            <div class="img">
              <img :src="item.picUrl" alt="">
            </div>
            <div class="title">
              <h3>{{ item.title }}</h3>
              <p>{{ item.roomNum }}居{{ item.bedNum }}床{{ item.bathNum }}人</p>
              <span class="span">￥{{ item.price
              }}</span>
              <div class="xs">找相似</div>
            </div>
          </div>

          <!-- <div class="li">
              <div class="img">
                <img
                  src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A2%84%E5%AE%9A%E7%95%8C%E9%9D%A2/u997.png"
                  alt="">
              </div>
              <div class="title">
                <h3>拱北华山别墅</h3>
                <p>珠海·3居3床6人·123平米</p>
                <span class="span">￥666</span>
                <div class="xs">找相似</div>
              </div>
            </div> -->


        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
import { recordListApi, } from "../../../api/record"
import MineHeader from "@/views/Mine/com/mine-header.vue"
import { Search } from 'vant';
// import { mapState } from "vuex";
export default {
  name: 'collect',
  components: {
    [MineHeader.name]: MineHeader,
    [Search.name]: Search,

  },
  data() {
    return {
      list: [],
    }
  },
  computed: {

    // ...mapState("collect", ["collectlist"]),

  },

  methods: {
    toAction(id) {

      this.$router.push({
        name: `detail`,
        params: { id },
      });
    },
    requestData() {
      let lslist = JSON.parse(localStorage.getItem("lslist"));
      this.list = lslist;
      
      console.log(this.list);
      // console.log(data.list[0].userId
      // );
    },
  },
  created() {
    this.requestData();
  },
}
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px / 750) * 100vw;

}

.pages-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 106;

}

.full-page {
  position: absolute;
  background-color: #fff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.record {
  height: 100%;
  background-color: #f4f6f9;

  .content {
    width: 85%;
    margin-left: 10%;
    margin-top: vw(40);

    .li {
      background-color: #fff;
      display: flex;
      margin-bottom: vw(20);

      .span {
        color: #ff9933;
        font-size: vw(36);
      }

      .img {
        height: vw(138);

        img {
          height: 100%;
          width: vw(160);
        }
      }

      .title {
        flex: 1;
        padding-left: vw(15);
        padding-top: vw(15);
        box-sizing: border-box;
        position: relative;

        h3 {
          font-size: vw(28);
          margin-bottom: vw(16);
        }

        p {
          margin-bottom: vw(20);
        }

        .xs {
          position: absolute;
          right: vw(30);
          bottom: vw(20);
          width: vw(100);
          height: vw(34);
          border-radius: vw(20);
          text-align: center;
          line-height: vw(34);
          box-shadow: vw(20);
          border: 1px solid #ccc
        }
      }
    }
  }
}
</style>